<template>
    <section class="content-box">
        <div>
        <!--工具条-->
        <el-col class="toolbar">
            <el-col :span="12">
                <h2>预算科目</h2>
            </el-col>
            <el-col :span="12">
                <el-form :inline="true" :model="filters">
                    <el-form-item>
                        <el-input v-model="filters.name" placeholder="请输入查询项"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="el-icon-search" v-on:click="handleFilterd"> 查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" class="el-icon-plus" @click="handleAdd"> 新建</el-button>
                    </el-form-item>
                    <label for="file" class="label-file">导入</label>
                    <input name="file" id="file" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" @change="update" />
                </el-form>
            </el-col>
        </el-col>
        <!--列表-->
        <el-table :data="tableData" max-height="400" highlight-current-row>
            <el-table-column prop="BudgetItem_Code" label="编码" sortable width="150">
            </el-table-column>
            <el-table-column prop="BudgetItem_Name" label="名称" sortable>
            </el-table-column>
            <el-table-column prop="BudgetItem_FullName" label="全名">
            </el-table-column>
            <el-table-column prop="IsEnabled" label="有效" sortable width="100">
            </el-table-column>
            <el-table-column prop="BudgetItem_BudgetCategory" label="分类" sortable width="100">
            </el-table-column>
            <el-table-column label="操作" width="200" >
                <template slot-scope="scope">
                    <!-- scope.$index 当前列表项index  , row 当前行的所有字段。  -->
                    <el-button-group>
                        <el-button size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                        <el-button size="small" @click="handleDel(scope.$index,scope.row)">删除</el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination @current-change="changePage" layout="prev, pager, next" :page-size="rows" :current-page="currentPage" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--新增界面-->
        <el-dialog title="添加" :visible.sync="addFormVisible" :modal-append-to-body="false" size="tiny">
            <el-form  :label-width="formLabelWidth" ref="addForm">
                <el-form-item label="上级预算科目：">
                    <el-select v-model="addForm.BudgetItem_ParentCode" filterable placeholder="请选择上级预算科目" >
                        <el-option v-for="v in BudgetItem_ParentCode" :key="v.Code" :label="v.Code+'~'+ v.Name" :value="v.Code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="inp" label="预算科目名称：">
                    <el-input  auto-complete="off" v-model="addForm.BudgetItem_Name" placeholder="请输入预算科目名称"></el-input>
                </el-form-item>
                <el-form-item  label="预算科目类型：">
                    <el-select v-model="addForm.BudgetItem_BudgetCategory" filterable placeholder="请选择预算科目类型">
                        <el-option v-for="S in SubjectType" :key="S.Value" :label="S.Key" :value="S.Value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="对应会计科目：">          
                    <el-select v-model="addForm.AccountItem" filterable placeholder="请选择会计科目">
                        <el-option v-for="item in AccountItem" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="对应现金流量：">
                    <el-select v-model.trim="addForm.CashFlowItem" filterable placeholder="请选择现金流量">
                        <el-option v-for="item in lowItemRes" :key="item.ID" :label="item.CashFlowItem_Name" :value="item.CashFlowItem_Code" ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="addSubmit" >确 定</el-button>
            </div>
        </el-dialog>

        <!--编辑界面-->
        <el-dialog title="编辑" :visible.sync="editFormVisible" :modal-append-to-body="false" size="tiny" key="dialog">
            <el-form :model="editForm" :label-width="formLabelWidth" ref="editForm">
                <el-form-item label="上级预算科目：">
                    <el-select v-model="editForm.BudgetItem_ParentCode" filterable placeholder="请选择上级预算科目" >
                        <el-option v-for="v in BudgetItem_ParentCode" :key="v.Code" :label="v.Code+'~'+ v.Name" :value="v.Code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="inp" label="预算科目名称：">
                    <el-input v-model="editForm.BudgetItem_Name" auto-complete="off" placeholder="请输入预算科目名称"></el-input>
                </el-form-item>
                <el-form-item label="预算科目类型：">
              
                    <el-select v-model="editForm.BudgetItem_BudgetCategory" filterable placeholder="请选择预算科目类型">
                        <el-option v-for="S in SubjectType" :key="S.Value" :label="S.Key" :value="S.Value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="对应会计科目：">
                    <el-select v-model="editForm.AccountItem" filterable placeholder="请选择对应会计科目">
                        <el-option v-for="item in AccountItem" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="对应现金流量：">
                    <el-select class="lowItemRes" v-model="editForm.CashFlowItem" filterable placeholder="请选择现金流量">
                        <el-option v-for="item in lowItemRes" :key="item.ID" :label="item.CashFlowItem_Name" :value="item.CashFlowItem_Code" ></el-option>
                    </el-select>
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="editSubmit">确 定</el-button>
            </div>
        </el-dialog>

        </div>
    </section>
</template>
<script>
export default {
    name: 'BudgetAccount',
    data() {
        return {
            tableData: [],//数据列表
            AccountItem: [],//会计科目集合
            BudgetItem_ParentCode:"",//上级科目
            lowItemRes: [],//现金流
            SubjectType: [],//科目类型
            addFormVisible: false, //新增界面是否显示
            editFormVisible: false, //编辑界面是否显示
            formLabelWidth: '120px',//input输入框宽度
            total: 0, //数据总数
            rows: 100, //每页显示多少条
            currentPage: 1,//当前页数
            
            addForm:{//新增页面数据
                key:"", //ID
                BudgetItem_ParentCode:"",//上级科目
                AccountItem: "",//会计科目
                BudgetItem_BudgetCategory:"",//科目类型
                BudgetItem_Name:"",//科目名称
                CashFlowItem:""//现金流量
            },
            editForm:{//编辑页面数据
                key:"",//ID
                BudgetItem_ParentCode:"",//上级科目
                AccountItem: "",//会计科目
                BudgetItem_BudgetCategory:"",//科目类型
                BudgetItem_Name:"",//科目名称
                CashFlowItem:""//现金流量
            },

            filters: { //查询项
                name: '',
            },
        }
    },
    methods:{
        CXAccountItem(){//会计科目
			axios.post("GetSimplifyAccountItemListZ").then( res=>{
			        // console.log(res)
			        // console.log(res.length)
			        let Details = []
			        for(let i = 0 ; i<res.length ; i++ ){
			        	let Data = { value: res[i].Code , label: res[i].Code + res[i].FullName}
			        	Details.push(Data)
			        }
			        this.AccountItem = Details
			        // console.log(this.options)
			    })
			    .catch(error=>{
			    	console.log(error);  
			    });		
        },
        PZlowItem() {//现金流类型
				axios.post("lowItem").then(res => {
						this.lowItemRes = res;
						// console.log('现金流类型', this.lowItemRes)
					})
					.catch(err => {
						console.log(err);
					});
			},
        upSubject(){//上级科目
            axios.post("getParentBudgetItemList").then( res=>{
                    // console.log(res)
                    this.BudgetItem_ParentCode = res;
                    const BudgetItem_ParentCode = this.BudgetItem_ParentCode;
			        
			    })
			    .catch(error=>{
			    	// console.log(error);  
			    });	
        },
        getSubjectType: function() { //科目类型
            axios.post('getBudgetCategory').then(data => {
                // console.log(data);
                this.SubjectType = data;
                const SubjectType = this.SubjectType;
                console.log(this.SubjectType);
            })
        },

        //新增
        addSubmit: function() { //提交表单
            // this.$refs.addForm.validate((valid) => {//验证
                // if (valid) {
                    this.$confirm('确认提交吗？', '提示', {}).then(() => {
                        // console.log(this.addForm.BudgetItem_Name);

                        let para = Object.assign({}, this.addForm);//拷贝对象进去
                        // console.log(para)
                        // para.AssistItem = para.AssistItem.toString();
                        axios.post("submitForm", para).then((res) => {
                            if (!res.Success) {
                                this.$notify.error({
                                    title: '失败',
                                    message: res.Message,
                                    type: 'success',
                                    offset: 200,
                                    duration: 1800
                                });
                                return;
                            }
                            
                            this.$notify.success({
                                title: '成功',
                                message: '新增成功',
                                type: 'success',
                                offset: 200,
                                duration: 1800
                            });
                           
                            
                            this.addFormVisible = false;//关闭窗口
                            this.getList();//重新刷新列表
                            this.$refs['addForm'].resetFields();
                        })
                    });
                // }
            // });
        },

        
        //显示编辑
        handleEdit: function(key, row) {//显示编辑界面
            this.editFormVisible = true;
            
            axios.post("getEntity", {
                key: row.BudgetItem_Code
            }).then(data => {
                // console.log(data);
                this.editForm.BudgetItem_ParentCode = data.BudgetItem_ParentCode;
                this.editForm.AccountItem  = data.AccountItem;
                this.editForm.BudgetItem_BudgetCategory = data.BudgetItem_BudgetCategory;
                this.editForm.BudgetItem_Name = data.BudgetItem_Name;
                this.editForm.CashFlowItem = data.CashFlowItem;
                this.editForm.key = data.BudgetItem_Code;
                // console.log(data.AccountItem_IsBankAccount);
                // console.log(data.AccountItem_IsCashAccount);
                // console.log(data.AccountItem_IsReimburse);
                // console.log(data.AccountItem_IsSunYi);
                // this.editForm.AccountItem_AccountBasic = data.AccountItem_AccountBasic;            
                // this.editForm.AccountItem_BalanceDirection = data.AccountItem_BalanceDirection.toString();
                // this.editForm.AccountItem_IsEnabled = data.AccountItem_IsEnabled;//
                // if (data.AWAList.length === 0) {
                //     this.editForm.AssistItem = [];
                // } else {
                //     //获取到 编辑项 已经选中的类型。 
                //     this.editForm.AssistItem = []
                //     for (let a = 0; a < data.AWAList.length; a++) {
                //         this.editForm.AssistItem.push(data.AWAList[a].AIWAI_AssistItemType)
                //     }
                // }
                // this.editForm.AccountItem_IsBankAccount = row.AccountItem_IsBankAccount;
                // this.editForm.AccountItem_IsCashAccount = row.AccountItem_IsCashAccount;
                // this.editForm.AceditFormcountItem_IsReimburse - row.AccountItem_IsReimburse;
                // this.editForm.AccountItem_IsSunYi = row.AccountItem_IsSunYi;
            }).catch(err => {
                console.log(err);
            });
        },

        //编辑
        editSubmit: function() {
            
            this.$refs.editForm.validate((valid) => {
                if (valid) {
                    this.$confirm('确认提交吗？', '提示', {}).then(() => {
                        // this.editForm.key = this.tableData.BudgetItem_Code;
                        // console.log(this.tableData.BudgetItem_Code);
                        let para = this.editForm;
                        // console.log(para);
                        // console.log(this.editForm.BudgetItem_ParentCode);
                        // para.AssistItem = para.AssistItem.toString();
                        axios.post("editSubmitForm", para).then((res) => {
                            // console.log(res);
                            if (!res.Success) {
                                this.$notify.error({
                                    title: '失败',
                                    message: res.Message,
                                    type: 'success',
                                    offset: 200,
                                    duration: 1800
                                });
                                return;
                            }
                            this.$notify.success({
                                title: '成功',
                                message: `编号` + para.key + ` 修改成功！！`,
                                type: 'success',
                                offset: 200,
                                duration: 1800
                            });
                            this.$refs['editForm'].resetFields();
                            this.editFormVisible = false;
                            this.getList();
                        });
                    });
                }
            });
        },

        changePage(page) {//当前页数
            this.currentPage = page;
            this.getList();
        },
        handleAdd: function(){//显示新增页面
            this.addForm = {
                BudgetItem_ParentCode:"",//上级科目
                AccountItem: "",//会计科目
                BudgetItem_BudgetCategory:"",//科目类型
                BudgetItem_Name:"",//科目名称
                CashFlowItem:""//现金流量
            }
            this.addFormVisible = true;
        },
        
        update(e){
          let file = e.target.files[0];           
          let param = new FormData(); //创建form对象
          param.append('file',file,file.name);//通过append向form对象添加数据
          param.append('chunk','0');//添加form表单中其他数据
          console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
          let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };  //添加请求头
          axios.post('importSupplier',param,config)
          .then(response=>{
            console.log(response.data);
          })        
        },
        getList() { //异步获取客户列表       
            axios.post("getBudgetAccountList",{
                page: this.currentPage,  // 当前页数， 
                rows: this.rows, // 每页多少条
            }).then(data => {
                this.total = data.total;//总页数
                this.tableData = data.rows; 
            }).catch(err => {
                console.log(err);
            })
        },
        /**
         * 查询项
         */
        handleFilterd() {
            var filterName = {"groupOp":"OR","rules":[{"field":"BudgetItem_Code","op":"cn","data":this.filters.name},{"field":"BudgetItem_Name","op":"cn","data":this.filters.name}],"groups":[]};
            axios.post("getBudgetAccountList",{filter:JSON.stringify(filterName)}).then(data => {
                this.tableData = data.rows;
            }).catch(err => {
                console.log(err);
            })
        },
        handleDel: function(key, row) {//删除         
            console.log(key);
            console.log(row);
            this.$confirm('确认删除该信息吗？','提示',{
                type:'warning'
            }).then(() => {
                let para = {
                    // code: row.BudgetItem_Code,
                    code: '',
                    key: row.BudgetItem_Code
                };
                console.log(para);
                axios.post('deleBudgetAccount',para).then((res) => {
					//NProgress.done();
					this.$notify.success({
                        title: '成功',
						message: `编号`+para.code+` 删除成功！！！`,
                        type: 'success',                       
                        offset: 200,
                        duration: 1800
					});
					this.getList();
				});
            }).catch((err) => {
                console.log(err);
            });
        }
    },
    mounted() {
        this.getList();//初始化页面时候就要率先执行获取列表类型接口
        this.CXAccountItem();
        this.upSubject();
        this.getSubjectType();
        this.PZlowItem();
    }
}
</script>

<style scoped lang="scss">
@import '../../common/css/index.css';
label.label-file{
    margin:0;
}
.el-input, .inp{
    width: 90.8% !important;
}
.el-select{
    width: 80%;
}
</style>